;
(function (doc) {
  var Waterfall = function (wrapper, opt) {
    //配置项
    //外层盒子
    this.oWrapper = doc.getElementsByClassName(wrapper)[0];
    //列数
    this.column = opt.column;
    //间隙
    this.gap = opt.gap;
    //图片API
    this.imgApi = opt.imgApi;
    //每个盒子的宽度
    //(1200 - (5 - 1) * 10) / 5 = 232
    this.itemWidth = (this.oWrapper.offsetWidth - (this.column - 1) * this.gap) / this.column;
    //初始化第几页
    this.pageNum = 0;
    //初始化页面数量
    this.pageSize = 0;
    //初始化数组保存的对应图片盒子高度
    this.heightArr = [];
  }

  Waterfall.prototype = {
    init: function () {
      //页面加载拿到图片数据
      this.getImgDatas(this.pageNum);
      this.bindEvent();
    },

    bindEvent: function () {
      window.addEventListener('scroll', this.scrollToBottom.bind(this), false);
    },

    //事件处理函数：鼠标滚动到页面底部
    scrollToBottom: function (e) {
      //判断是否触底
      if (getScrollTop() + getWindowHeight() === getScrollHeight()) {
        //如3页图片 0 1 2
        this.pageNum++;

        //2 <= 3-1
        // 说明在最后一页
        if (this.pageNum <= this.pageSize - 1) {
          this.getImgDatas(this.pageNum);
        }
      }
    },

    //ajax请求图片数据
    getImgDatas: function (pageNum) {
      var _self = this;
      xhr.ajax({
        url: this.imgApi,
        type: 'POST',
        dataType: 'JSON',
        data: {
          pageNum: pageNum
        },
        success: function (data) {
          //后端pageNum>2显示'NO DATA'
          //所以前端判断NO DATA处理
          if (data !== 'NO DATA') {
            //解析字符串转为JSON数据并保存起来
            var pageData = JSON.parse(data.pageData);
            // 将服务器响应的pageSize保存到全局
            // 将字符串整形到数值
            _self.pageSize = parseInt(data.pageSize);
            //渲染页面
            _self.renderList(pageData, _self.pageNum);
          }
        }
      })
    },

    //渲染页面方法
    renderList: function (data, pageNum) {
      var _self = this,
        //初始新的盒子集合
        oItems = null,
        //初始化最小值下标
        minIdx;

      data.forEach(function (elem, idx) {
        //创建盒子来装载图片
        var oItem = doc.createElement('div'),
          //创建img对象
          oImg = new Image(),
          //初始计算左定位的值
          itemLeft = 0;

        // 第一列的5个盒子
        if ((idx + 1) % _self.column === 1) {
          // 第一列的左定位永远都是0
          itemLeft = 0;
        } else {
          //其他列盒子的定位 宽度+间隙
          itemLeft = idx * (_self.itemWidth + _self.gap) + 'px';
        }

        //给盒子新增类名和宽度高度
        oItem.className = 'wf-item';
        oItem.style.width = _self.itemWidth + 'px';

        //已经知道 实际图片宽高(pwh)  和 盒子宽度(bw) 
        //求盒子高度(bh)？
        // bh = bw * ph /pw
        oItem.style.height = _self.itemWidth * elem.height / elem.width + 'px';

        //给创建的图片对象引入地址
        oImg.src = elem.img;
        //让盒子装载图片
        oItem.appendChild(oImg);
        //插入到自定义的大盒子里
        _self.oWrapper.appendChild(oItem);

        //准备排列盒子
        //获取所有的新盒子
        oItems = doc.getElementsByClassName('wf-item');
        // 第一行 且 只有第一页的时候所有盒子紧贴页面上边缘
        if (idx < _self.column && pageNum == 0) {
          //上下距离
          _self.heightArr.push(oItem.offsetHeight);
          //上下定位
          oItem.style.top = '0';
          //左定位
          oItem.style.left = itemLeft;
        } else {
          //需要找数组里最小的值的下标
          minIdx = _self.getMinIdx(_self.heightArr);
          //让盒子的左定位为 当前盒子的页面离左距离
          oItem.style.left = oItems[minIdx].offsetLeft + 'px';
          //让盒子的上定位为 当前盒子的页面离上距离 + 间隙
          oItem.style.top = (_self.heightArr[minIdx] + _self.gap) + 'px';
          //更新数组里盒子的高度
          _self.heightArr[minIdx] += (oItem.offsetHeight + _self.gap);
        }
        //淡入效果
        oImg.style.opacity = '1';
      });
    },
    //找数组最小值的下标
    getMinIdx: function (arr) {
      //当前最小的值 console.log(Math.min.apply(null, arr));
      //找到最小值的下标
      return [].indexOf.call(arr, Math.min.apply(null, arr));
    }
  }

  //把插件构造函数挂载到全局
  window.Waterfall = Waterfall;

})(document);

/**
 * 调用写法
    new Waterfall('js_box', {
      imgApi: 'server/index.php',
      column: 8,
      gap: 10
    }).init();
 */